<template>
	<view>
		<view
			style="background-color: rgba(255, 255, 255, 0.8); z-index: 99999;"
			class="flex flex-direction justify-center vh-100 vw-100 fixed left0 top0 padding-sm">
		
			<view class="bg-white radius overflow-hidden shadow">
				<view class="padding-sm bg-yellow flex justify-start align-center">
					<text>添加权限</text>
				</view>
				<view class="padding-xs">
					<view class="padding-xs solid-bottom">
						<view @tap="openTx(item)" class="relative w-100 radius overflow-hidden">
							<view class="img-cover relative">
							</view>
							<view v-if="item.tx" class="absolute top0 w-100 h-100">
								<image class="w-100 h-100 round" mode="aspectFill" :src="item.tx"></image>
							</view>
							<view v-else class="absolute top0 w-100 h-100">
								<view class="w-100 h-100 round bg-gray"></view>
							</view>
							<view 
								style="background-color: rgba(255, 255, 255, 0.5);"
								class="absolute top0 w-100 h-100 flex flex-direction justify-center">
								<view class="flex flex-direction align-center text-black text-bold">
									<text class="text-xsl"><text class="cuIcon-camera "></text></text>
									<text>点击上传头像</text>
								</view>
							</view>
						</view>
					</view>
					<view class="padding-xs flex justify-between align-center solid-bottom">
						<text>人员姓名：</text>
						<view class="padding-tb-sm flex justify-end align-baseline text-lg">
							<input class="bg-white radius text-right margin-0 padding-0" v-model="item.mc" placeholder="输入人员姓名" />
							<text class="cuIcon-right "></text>
						</view>
					</view>
					<view class="padding-xs flex justify-between align-center solid-bottom">
						<text>联系电话：</text>
						<view class="padding-tb-sm flex justify-end align-baseline text-lg">
							<input class="bg-white radius text-right margin-0 padding-0" v-model="item.tel" placeholder="输入联系电话" />
							<text class="cuIcon-right "></text>
						</view>
					</view>
					<view class="padding-xs flex justify-between align-center solid-bottom">
						<text>开始时间：</text>
						<view class=" flex justify-end align-center padding-tb-sm">
							<picker class="" mode="time" :value="item.st" :start="item.ststart" :end="item.stend"
								@change="timeChange($event, item, 'st', index)">
								<view class="flex align-baseline text-black text-lg">
									<text v-if="item.st" class=" ">{{item.st}}</text>
									<text v-else class=" ">开始时间</text>
									<text class="cuIcon-right "></text>
								</view>
							</picker>
						</view>
					</view>
					<view class="padding-xs flex justify-between align-center solid-bottom">
						<text>结束时间：</text>
						<view class=" flex justify-end align-center padding-tb-sm">
							<picker class="" mode="time" :value="item.et" :start="item.etstart" :end="item.etend"
								@change="timeChange($event, item, 'et', index)">
								<view class="flex align-baseline text-black text-lg">
									<text v-if="item.et" class=" ">{{item.et}}</text>
									<text v-else class=" ">结束时间</text>
									<text class="cuIcon-right "></text>
								</view>
							</picker>
						</view>
					</view>
					<view class="padding-xs flex justify-between align-center">
						<view @tap="cancel" class="margin-xs bg-red radius shadow padding w-33 text-center">取消</view>
						<view @tap="confirm" class="margin-xs bg-green radius shadow padding w-33 text-center">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from "@/wx-cos/upload.js";
	export default {
		props: {
			skjl: {
				type: Object,
				default: function() {
					return undefined;
				}
			},
		},
		data: function() {
			return {
				item: {
						skjlid: this.common.generateID("SKJL"),
						mc: "",
						tx: "",
						tel: "",
						kcid: "",
						fjid: "",
						mdid: "",
						mjid: "",
						rq: "",
						st: "",
						et: "",
						checkflg: true,
					},
			};
		},
		created: function() {
			if (this.skjl) {
				this.item = this.skjl;
			}
		},
		methods: {
			openTx: function(item) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					sizeType: ['original'],
					camera: "back",
					success: res => {
						upload.checkUploadFile(
							res.tempFiles[0].tempFilePath,
							item.skjlid,
							"face", progressData => {
								console.log(progressData);
							}).then((data) => {
							item.tx = data.url;
						});
					}
				})
			},
			timeChange: function(e, item, tag, index) {
				item[tag] = e.detail.value;
				
				if (tag == "st") {
					item.etstart = e.detail.value;
				}
				
				if (tag == "et") {
					item.stend = e.detail.value;
				}
				
			},
			cancel: function() {
				this.$emit("finish", undefined);
			},
			confirm: function() {
				if (!this.item.tx) {
					this.message.error("请录入人脸");
					return;
				}
				
				if (!this.item.mc) {
					this.message.error("请填写人员姓名");
					return;
				}
				
				if (!this.item.tel) {
					this.message.error("请填写联系电话");
					return;
				}
				
				if (!this.item.st) {
					this.message.error("请选择开始时间");
					return;
				}
				
				if (!this.item.et) {
					this.message.error("请选择结束时间");
					return;
				}
				
				this.api("/skjl/date/post").send({
					skjl: this.item
				}).then(data => {
					this.$emit("finish", this.item);
				});
				
				
				
			}
		}
	}
</script>

<style>
</style>